<script setup lang="ts">
import { ref, reactive } from 'vue'
// import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import 'element-plus/theme-chalk/el-message.css'
import VerifyCode from '@/components/VerifyCode.vue';
// import { useUserStore } from '@/stores/user'
import { loginAPI } from '@/apis/user';

// const userStore = useUserStore()
// const router = useRouter()


//表单校验
// 1.0 定义表单元素
interface RuleForm {
    account: string,
    password: string,
    verifyCode: string,
    clientId: string,
    agree: boolean
}
// 2.0 表单对象
const formRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    account: 'heima282',
    password: 'hm#qd@23!',
    verifyCode: '1234',
    clientId: "1",
    agree: true
})

// 3.0 定义规则
const rules = reactive<FormRules<RuleForm>>({
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 15, message: '账号限制3-15个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    verifyCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 0, max: 4, message: '请输入4位验证码', trigger: 'blur' },
    ],
    agree: [
        { required: true, message: '请先阅读隐私条款和同意条款', trigger: 'blur' },
    ]
})

// 4.0 登陆事件
const doLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, _fields) => {
        if (valid) {
            // 登陆
            loginAPI(ruleForm).then(res => {
                console.log(res)
                if(res.data.code != 0){
                    ElMessage({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        }
    })
}

// 5.0 重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

// 6.0 获取验证码随机数
const on_random = (clientId: string) => {
    ruleForm.clientId = clientId
}

// onMounted(()=>{
//     on_random
// })

</script>


<template>
    <div class="account-box">
        <div class="form">
            <el-form ref="formRef" :model="ruleForm" :rules="rules" status-icon size="large">
                <el-form-item prop="account" label="账户">
                    <el-input v-model="ruleForm.account" />
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
                <el-form-item prop="code" label="验证码" class="form-code">
                    <el-input class="form-code-input" v-model="ruleForm.verifyCode" />
                    <VerifyCode ref="verifycodeRef" @on-random="on_random" class="form-code-verifycode">
                    </VerifyCode>
                </el-form-item>
                <el-form-item prop="agree" label-width="22px">
                    <el-checkbox v-model="ruleForm.agree" size="large">
                        我已同意隐私条款和服务条款
                    </el-checkbox>
                </el-form-item>
            </el-form>
            <div class="form-footer">
                    <el-button size="large" class="subBtn" @click="doLogin(formRef)">登录</el-button>
                    <el-button size="large" class="subBtn" @click="resetForm(formRef)">重置</el-button>
                    <a class="form-footer-register" href="/register">点击注册</a>
                </div>
        </div>
    </div>
</template>

<style scoped lang='scss'>
.account-box {
    // background: url("https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E5%B0%8F%E5%8D%97%E7%93%9C.webp") repeat;
    background-color: rgb(234, 127, 69);
    background-size: 100%;

    .form {
        padding: 10px 20px 20px 20px;
        // border: 1px red solid;
        width: 400px;
        height: 300px;
        

        .form-code {
            .el-form-item__content {
                justify-content: space-between;

                .form-code-input {
                    width: 50%;
                }

                .form-code-verifycode {
                    // 内部元素居中
                    display: flex;
                    border-radius: 5%;
                    width: 22%;
                    height: 32px;
                    margin-left: 25%;
                    // 内部元素居中
                    align-items: center;
                }
            }

        }

        &-item {
            margin-bottom: 28px;

            .input {
                position: relative;
                height: 36px;

                >i {
                    width: 34px;
                    height: 34px;
                    background: #cfcdcd;
                    color: #fff;
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    text-align: center;
                    line-height: 34px;
                    font-size: 18px;
                }

                input {
                    padding-left: 44px;
                    border: 1px solid #cfcdcd;
                    height: 36px;
                    line-height: 36px;
                    width: 100%;

                    &.error {
                        border-color: $priceColor;
                    }

                    &.active,
                    &:focus {
                        border-color: $xtxColor;
                    }
                }

                .code {
                    position: absolute;
                    right: 1px;
                    top: 1px;
                    text-align: center;
                    line-height: 34px;
                    font-size: 14px;
                    background: #f5f5f5;
                    color: #666;
                    width: 90px;
                    height: 34px;
                    cursor: pointer;
                }
            }

            >.error {
                position: absolute;
                font-size: 12px;
                line-height: 28px;
                color: $priceColor;

                i {
                    font-size: 14px;
                    margin-right: 2px;
                }
            }
        }

        .agree {
            a {
                color: #069;
            }
        }

        .form-footer {
            display: flex;
            justify-content: space-around;
            .subBtn {
                &.disabled {
                    background: #cfcdcd;
                }
            }
            .form-footer-register{
                color: blue;
                position: relative;
                left: 10px;
                top: 10px;
                font-size: 3px;
                &:hover {
                    color: red;
                };
            }
            
        }
    }
}

.subBtn {
    background: $xtxColor;
    width: 20%;
    color: #fff;
    float: center;
}
</style>